import Avatar from '../avatar/Component.vue';
import Component from '@teld/q-components/Timeline';
import useMappingProps from 't/common/hooks/useMappingProps';
import { commonProps, fixNameSpace } from 't/common/utils';
import { console } from 't/third-party/vuedraggable/util/console';
import { computed, defineComponent, ref,onMounted} from 'vue';
import TimelineEntry from './TimelineEntry.jsx';
import styles from './index.module.scss';
import './index.scss';

export default defineComponent({
  name: fixNameSpace(Component.name),
  props: {
    ...commonProps,
    ...Component.props,
    itemsDataSourceType: {
      type: String,
      default() {
        return 'static';
      },
    },
    staticItems: Array,
    listDataSource: Array,
    componentColor: {
      type: String,
      default() {
        return 'primary';
      },
    },
    titleField: String,
    bodyField: String,
    subtitleField: String,
    colorField: String,
    iconField: String,
    picField: String,
    nameField: String,
    layout: String,
    side: String,
    sideField: String,
    value:Array,
    textField: String,
    reverse: {
      type: Boolean,
      default() {
        return false;
      },
    },
  },
  emits: [],
  setup(props, { attrs, emit, expose, slots }) {
    const refComponent = ref();
    const value = ref();
    const getCaption = (caption, value) => {
      if (value && window.Funcs) {
        debugger;
        return Funcs.GetTerms(value.ReferenceExpr, caption);
      } else {
        debugger;
        return caption;
      }
    };
    const [mappingProps, mappingExpose] = useMappingProps(props, { value });
    const timeLineList = computed(() => {
      const dataSource =
        mappingProps.itemsDataSourceType === 'static'
          ? mappingProps.staticItems
          : mappingProps.listDataSource;
      const timelineData = mappingProps.reverse
        ? dataSource.slice().reverse() // 创建数组的副本并倒序
        : dataSource;
      value.value = formatTimeLineList(timelineData)
      return value.value;
    });
    console.log(mappingProps.size,'mappingProps.size')
    expose(mappingExpose);

    onMounted(() => {});

    //去除每一个[key,value]中，value为空的
    const propertyHasThenUse = (key, obj = {}) => {
      if (!obj[key]) delete obj[key];
      return obj;
    };


    const formatTimeLineList = list => {
      if (!Array.isArray(list)) {
        return [];
      }
      return list.map(item => {
        const obj = {
          title: item[mappingProps.titleField] || item.title,
          body: item[mappingProps.bodyField] || item.body,
          subtitle: item[mappingProps.subtitleField] || item.subtitle,
          color: item[mappingProps.colorField] || item.color,
          icon: item[mappingProps.iconField] || item.icon || undefined,
          pic: item[mappingProps.picField] || item.pic || undefined,
          name: item[mappingProps.nameField] || item.name || undefined,
          side: item[mappingProps.sideField] || item.side,
        };
        return { ...item, ...obj };
      });
    };
    let attrs_ = { ...attrs };
    delete attrs_['data-uid'];
    delete attrs_['data-tag'];
    delete attrs_['class'];
    delete attrs_['style'];
    return () => {
      return (
        <div class='q-px-lg q-py-md' style='outline:0!important'>
          {mappingProps.itemsDataSourceType === 'dynamic' &&
          !!window['fas']?.inDesign ? (
            <Component color='secondary' v-show={mappingProps.visible}>
              <TimelineEntry
                title='这是标题部分1(title)'
                body='这是说明部分1(body)'
                subtitle='这是时间戳部分1'
                pic='https://cdn.quasar.dev/img/avatar5.jpg'
                color='#1476ff'
                name='这是辅助文本1'
                icon='fas dx-icon icon-t-check-circle'
              ></TimelineEntry>
              <TimelineEntry
                title='这是标题部分2(title)'
                body='这是说明部分2(body)'
                subtitle='这是时间戳部分2'
                pic='https://cdn.quasar.dev/img/avatar5.jpg'
                color='#1476ff'
                name='这是辅助文本2'
                icon='fas dx-icon icon-t-check-circle'
              ></TimelineEntry>
            </Component>
          ) : (
            <Component
              class={['t-timeline', styles.module]}
                {...attrs_}
              layout={mappingProps.layout}
              side = { mappingProps.side }
              v-show={mappingProps.visible}
               color={mappingProps.componentColor}
            >
              {timeLineList.value.map((item, index) => (
                <TimelineEntry key={index} {...item} body={undefined}>
                  {{
                    default() {
                      return (
                        item.body && (
                          <div
                            class='t-timeline-body'
                            innerHTML={getCaption(item.body, item.ValueInfo_body)}
                          ></div>
                        )
                      );
                    },
                    title() {
                      return (
                        item.title && (
                          <div
                            class='t-timeline-slot-title'
                            innerHTML={getCaption(item.title, item.ValueInfo_title)}
                          ></div>
                        )
                      );
                    },
                    subtitle() {
                      return (
                        <div class='t-timeline-title'>
                          <div class='t-timeline-subtitle'>{item.subtitle}</div>
                          {item[mappingProps.picField] ||
                          item.pic ||
                          item[mappingProps.nameField] ||
                          item.name ? (
                            <div class='t-timeline-line'></div>
                          ) : null}
                          {item[mappingProps.picField] || item.pic ? (
                            <Avatar size='18px' class='t-timeline-titleavator'>
                              <img src={item.pic}/>
                            </Avatar>
                          ) : null}
                          {item[mappingProps.nameField] || item.name ? (
                            <span class={'t-timeline-titletext'}>
                              {getCaption(item.name, item.ValueInfo_name)}
                            </span>
                          ) : null}
                        </div>
                      );
                    },
                  }}
                </TimelineEntry>
              ))}
            </Component>
          )}
        </div>
      );
    };
  },
});
